<template>
  <div class="page">
    <el-row>
      <el-col class="title">
        <h2>欢迎注册</h2>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10" :offset="7">
        <el-form ref="regForm" :model="form" :rules="rules" label-width="120px">
          <el-form-item label="邮箱" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入正确的邮箱地址"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="verifyPassword">
            <el-input type="password" v-model="form.verifyPassword"
            placeholder="请再次输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit('regForm')">注册</el-button>
            <el-button @click="reset('regForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as user from '@/api/user.api';

export default {
  data() {
    return {
      form: {
        userName: '',
        password: '',
        verifyPassword: '',
      },
      rules: {
        userName: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入您的邮箱'));
              } else if (!/[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
                callback(new Error('您输入的邮箱格式不正确!'));
              } else {
                callback();
              }
            },
          },
        ],
        password: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入密码'));
              } else if (
                !/(?=.*[a-z])(?=.*[_])(?=.*\d)|(?=.*[a-z])(?=.*\d)[^]{8,}$/.test(value)
              ) {
                callback(new Error('密码应为8位以上字母、数字或下划线组成'));
              } else {
                this.$refs.regForm.validateField('verifyPassword');
                callback();
              }
            },
          },
        ],
        verifyPassword: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请再次输入 密码'));
              } else if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致!'));
              } else {
                callback();
              }
            },
          },
        ],
      },
    };
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          try {
            await user.reg({
              username: this.form.userName,
              password: this.form.password,
              checkPass: this.form.verifyPassword,
            });
            this.$message({
              type: 'success',
              message: '注册成功了，去登录',
            });
            
            setTimeout(() => {
              this.$router.push('/login'); 
            }, 500);
          } catch(e) {
            this.$message({
              type: 'error',
              message: e,
            });
          }
        }
      });
    },
    reset(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  text-align: center;
  line-height: 50px;
  margin-bottom: 30px;
}
</style>
